The simplest way to configure your platforms is to specify merely the name of a supported platform like this:

$("#container").hshare({
    platforms: [{
        name: "kaixin"
    }, {
        name: "pengyou"
    }, {
        name: "qzone"
    }, {
        name: "tieba"
    }, {
        name: "douban"
    }, {
        name: "qq"
    }, {
        name: "renren"
    }, {
        name: "sinaweibo"
    }]
});

hshare embeds the corresponding configuration for these platforms and will use them during rendering.

Remember: If you don't specify platforms(platforms param's value is undefined) then the following platform will be used by default.

name	platform
qzone	QQ空间
qq	QQ
wechat	微信
sinaweibo	新浪微博
douban	豆瓣

Furthermore, in hshare, a platform can be customized as you wish. After analysing API of a great many platforms, we have concluded that a platform can be configured with the following components: An HTML template. Some params that should be specified dynamically into the template. * An click event handler that is called when the HTML DOM is clicked.

For example, here is the configuration data for the Qzone platform that we specified by default:

{
    name: "qzone",
    template: "<a class='#{css}' href='#{apiLink}?url=#{url}&title=#{title}' target='_blank'  title='#{hint}'><img align='top' src='#{icon}' alt='#{hint}' />#{text}</a>",
    params: {
        apiLink: "http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey",
        icon: "https://heavenduke.github.io/hshare/icons/qzone.png",
        text: "QQ空间",
        hint: "分享到QQ空间",
        size: "medium",
        title: "HShare+Demo",
        url: "https%3a%2f%2fheavenduke.github.io%2fhshare%2ftest.html",
        css: "hshare hshare-medium hshare-text"
    }
}

defailed explanation is shown below:

name	type	meaning
name	String	the name of the platform
template	String(HTML)	the HTML template that the platform's entry use
params	Object(Pair of strings)	data that will be filled into template
callback	Function	event handler when the entry is clicked

in the above example, params consists of key-value pairs. In the HTML template, you can specify a dynamic data use syntax #{key}, and the corresponding value will be filled into the specified location. For the above example, the eventually HTML is like below:

<a class='hshare hshare-medium hshare-text' href='http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=https%3a%2f%2fheavenduke.github.io%2fhshare%2ftest.html&title=HShare+Demo' target='_blank'  title='分享到QQ空间'>
    <img align='top' src='https://heavenduke.github.io/hshare/icons/qzone.png' alt='分享到QQ空间' />
    QQ空间
</a>

Notice 1

All params can be overritten. If you specify a customized template, you can specify any params as you like.

But if you use the default template of our supported platforms, remember that the default template is as followed:

<a class='#{css}' href='#{apiLink}?url=#{url}&title=#{title}' target='_blank'  title='#{hint}'>
    <img align='top' src='#{icon}' alt='#{hint}' />
    #{text}
</a>

Correspondingly, the following reserved param key will be used:

name	type	meaning
css	String	css class that the entry use(defined in hshare.min.css)
title	String(urlencoded)	the title/name that you want to show in the social platform
url	String(urlencoded)	the url that you want to share
apiLink	String(url)	the url that the social platform use for sharing
size	String	the entry's size
text	String	the entry's shown text if renderText's value is true
hint	String	tooltip that will be shown when the cursor hovers above the entry
icon	String(url)	icon that the entry use

Notice 2

since the callback param is a function used as event handler, its format should be like:

function (event) {
    // some action....
    // you can use $(this) to get the clicked entry.
}